import { IStylesFunctionOrObject, IComponentStyles } from "@fluentui/foundation-legacy";
import { INavStyles, Stack, FontIcon, IStackProps, IStackStyles, IStyleFunctionOrObject, IStackSlots, IStackTokens } from "@fluentui/react";
import { FunctionComponent, useState } from "react";
import { Link, useLocation, useParams } from "react-router-dom";
import Alymodel from "../../mysql_interface/model";


const navStyles: Partial<INavStyles> = {
    root: {
        width: 208,
        height: 350,
        boxSizing: 'border-box',
        border: '1px solid #eee',
        overflowY: 'scroll'
    },
};


type P = {
    lession: Alymodel.IMlession[]
    course?: Alymodel.IMcourse,
    my?: Alymodel.IMcourse
}

const styles: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: {
        width: 336,
        height: 'auto',
    },
}

const banstyle: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: { backgroundColor: '#363636', height: '60px', lineHeight: '60px', color: '#ffffff', paddingLeft: '24px', paddingRight: '24px', }
}

const banactivitystyle: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: { backgroundColor: 'var(--bs-dark)', height: '60px', lineHeight: '60px', color: '#ffffff', paddingLeft: '24px', paddingRight: '24px', }
}

const listStack: IStylesFunctionOrObject<IStackProps, IStackTokens, IComponentStyles<IStackSlots>> = {
    root: { height: '48px', paddingLeft: '24px', paddingRight: '24px', paddingTop: '12px', paddingBottom: '12px', cursor: 'pointer', position: 'relative' },
}

const VideoLeft: FunctionComponent<P> = (p) => {
    const location = useLocation()

    const params = useParams<any>()
    const [show2, setshow2] = useState(Number(params?.ID) === p.course?.ID)
    const course_ID = Number(params?.ID)
    const lession_key = Number(new URLSearchParams(location.search).get('lession'))

    return (
        <Stack styles={styles} >
            {
                p.lession.length > 1 ? <Stack className='cu' onClick={() => setshow2(!show2)} styles={course_ID === p.course?.ID ? banactivitystyle : banstyle} horizontal disableShrink>
                    <Stack.Item grow className='fw-bold'  >
                        {p.course?.name}
                    </Stack.Item>
                    <Stack.Item  >
                        {
                            show2 ? <FontIcon iconName="ChevronDownSmall" ></FontIcon> :
                                <FontIcon iconName="ChevronRightSmall" ></FontIcon>
                        }
                    </Stack.Item>
                </Stack> : <></>
            }

            <Stack style={{ display: (show2 || p.lession.length === 1) ? 'flex' : 'none' }} >
                {
                    p.lession.map((v, k) => {
                        const my = p.my
                        const search = new URLSearchParams(location.search)
                        search.set('lession', String(k))
                        search.toString()
                        const to = '/course/' + p.course?.ID + '/?' + search.toString()
                        return (
                            <Stack key={k} horizontal disableShrink className={(course_ID === p.course?.ID && k === lession_key) ? "transition bg-juse" : 'transition listStack'} styles={listStack} >
                                <Stack.Item grow  >
                                    {
                                        my ? <Link style={{ color: '#fff' }} className="_a stretched-link" to={to}  > {v.lessionName ? v.lessionName : p.course?.name}</Link> :
                                            <span style={{ color: '#777' }}>{v.lessionName ? v.lessionName : p.course?.name}</span>
                                    }
                                </Stack.Item>
                                <Stack.Item style={{ width: 14, textAlign: 'center' }} >
                                    <FontIcon style={{ color: my ? '#fff' : '#777' }} iconName={my ? "Play" : 'Lock'} ></FontIcon>
                                </Stack.Item>
                            </Stack>
                        )
                    })
                }
            </Stack>
        </Stack>
    )
}

export default VideoLeft